<template>
  <el-dialog title="新增设备" :visible.sync="adddialog" width="40%" :before-close="cancel">
    <template>
      <el-form
        ref="ruleForm"
        :model="orderForm"
        :rules="orderFormrules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="设备编号:">
          <span> 系统自动生成</span>
        </el-form-item>
        <el-form-item label="选择型号" prop="vmType">
          <el-select v-model="orderForm.vmType" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in currentPageRecordsType"
              :key="item.typeId"
              :label="item.name"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位" prop="nodeId">
          <el-select v-model="orderForm.nodeId" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in currentPageRecordsPT"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <div class="button">
          <div>
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="createdorder">确 定</el-button>
          </div>
        </div>
      </el-form>
    </template>
  </el-dialog>
</template>

<script>
import { vmvmTypeAPI, vmnodeAPI, addVmAPI } from '@/api/vm'
export default {
  props: {
    adddialog: {
      type: Boolean,
      default: false
    }
    // currentPageRecords: {
    //   type: Array,
    //   required: true
    // }
  },
  data() {
    return {
      orderForm: {
        vmType: '',
        nodeId: ''
      },
      orderFormrules: {
        vmType: [{
          required: true
        }],
        nodeId: [{
          required: true
        }]
      },
      currentPageRecordsType: [],
      currentPageRecordsPT: []
    }
  },
  created() {
    this.getVmType()
  },
  methods: {
    cancel() {
      this.$emit('update:adddialog', false)
      this.$refs.ruleForm.resetFields()
      this.orderForm = {}
    },
    async createdorder() {
      await this.$refs.ruleForm.validate()
      const res = await addVmAPI(1, this.orderForm.vmType, this.orderForm.nodeId)
      console.log(res)
      this.$message.success('创建成功')
      this.cancel()
    },
    async getVmType() {
      const res = await vmvmTypeAPI()
      const result = await vmnodeAPI()
      this.currentPageRecordsType = res.data.currentPageRecords
      this.currentPageRecordsPT = result.data.currentPageRecords
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    margin-left: 100px;
}

.el-form {
    .button {
        display: flex;
        justify-content: center;
    }
}
</style>
